<!doctype html>

<title>00 Object Elements - React From Zero</title>

<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>

<div id="app">
  <!--The render target of our React application-->
</div>

<script>
  // React uses ES2015 Symbols to "tag" its element-objects.
  // It uses a magic number as fallback on older browsers.
  var magicValue = (Symbol && Symbol.for('react.element')) || 0xeac7

  // React uses virtual DOM elements, which become real DOM elements on a render.
  // A virtual DOM element can be defined as a simple object literal.
  // Normally you would use the React.createElement() to create an element.
  // This is what the return value of a React.createElement() call could look like.
  var reactElement = {

    // This special property will be checked by React to ensure this object
    // is an React element and not just some user data
    // React.createElement() sets it for your
    $$typeof: magicValue,

    // This defines the HTML-tag
    type: 'h1',

    // This defines the properties that get passed down into the element
    props: {

      // In this example there is just a single text node as child
      children: 'Hello, world!',

      // a CSS class
      className: 'abc',

      // styles can be passed as object literals
      // React uses camelCase instead of dashed-case (like CSS/D3 do)
      style: {
        textAlign: 'center',
      },

      // event handlers can be added as properties, too
      // React uses synthetic events, which basically try to normalize browser behaviour
      onClick: function (notYourRegularEvent) { alert('click') },
    },

  }

  // another element that doesn't have much configuration
  var anotherElement = {
    $$typeof: magicValue,
    type: 'p',
    props: {
      children: 'A nice text paragraph.',
    },
  }

  // React needs a DOM element as render target
  var renderTarget = document.getElementById('app')

  // ReactDOM is responsible for inserting the element into the DOM
  ReactDOM.render(reactElement, renderTarget)

</script>